<template>
  <view>
    <!-- pages/chognzhi/chognzhi.wxml -->
    <view class="cz-ding">
      <view class="cz-ding-text">充值规则</view>
      <view class="cz_ding_for">
        <view class="cz-ding-kk" v-for="(item,index) in rechargelist" :key="index" @tap="changecheck(index)"
              :style="currentIndex == index ? 'background-color:rgb(221, 177, 140,0.2)' : ''">
          <view class="cz-ding_text1">{{ item.price }}元</view>
          <view class="cz-ding_text2">送{{ item.give_price }}元</view>
          <!-- <view class="cz-ding_text3">送300积分</view> -->
        </view>
        <view class="cz-ding-kk" @tap="wu"
              :style="currentIndex == 9999 ? 'background-color:rgb(221, 177, 140,0.2)' : ''">
          <input class="cz-ding_text4" type="text" placeholder="其他金额" @change="inputmoney"/>
        </view>
      </view>
    </view>

    <view class="ge2"></view>
    <view class="cz-xiaaa" v-if="rechargelist[currentIndex].coupon_list && rechargelist[currentIndex].coupon_list.length>0">
      <view class="cz-xia-h1">赠送优惠券</view>
      <view class="cz-xia-kj">
        <view class="cz-ding-kk" v-for="(item,index) in rechargelist[currentIndex].coupon_list" :key="index">
          <view class="cz-ding_text1">{{ item.name }}元</view>
          <!-- <view class="cz-ding_text3">送300积分</view> -->
        </view>
      </view>
    </view>
    <view class="ge2"></view>
    <view class="cz-xiaaa" style="padding-bottom: 100px" v-if="rechargelist[currentIndex].card_list && rechargelist[currentIndex].card_list.length>0">
      <view class="cz-xia-h1">赠送卡券</view>
      <view class="cz-xia-kj">
        <view class="cz-ding-kk" v-for="(item,index) in rechargelist[currentIndex].card_list" :key="index">
          <view class="cz-ding_text1">{{ item.title }}</view>
          <view class="cz-ding_text3">{{ item.discount }}</view>
        </view>
      </view>
    </view>

    <view class="di">
      <view class="cz-di-k" @tap="showModal">
        <view>立即购买</view>
      </view>
    </view>

    <view class="page">
      <!-- 页面内容 -->
      <view class="modal" v-if="modalVisible">
        <view class="modal-header">
          <image class="close-btn" @tap="closeModal" src="/static/pages/img/x .png"></image>
        </view>
        <image class="qr-code" :src="qrCodeUrl"></image>
        <view>请使用微信扫一扫完成支付</view>
      </view>
      <view class="mask" v-if="modalVisible" @tap="closeModal"></view>
    </view>
  </view>
</template>

<script>
// pages/chognzhi/chognzhi.js

import {rechargeindexnew, rechargeList, userrechargenew} from '../../common/api';

export default {
  data() {
    return {
      currentIndex: 0,
      rechargelist: [
        {
          "id": 168,
          "price": "50.00",
          "give_price": "0.00",
          "give_tea_price": "0.00",
          "coupon_ids": "43",
          "give_text": "送优惠券",
          "coupon_list": [
            {
              "id": 43,
              "name": "免费2小时",
              "price": "39.80",
              "full_price": "39.80",
              "num": 1
            }
          ],
          "num": 1
        },
        {
          "id": 169,
          "price": "100.00",
          "give_price": "100.00",
          "give_tea_price": "0.00",
          "coupon_ids": "43",
          "give_text": "送100.00元",
          "coupon_list": [
            {
              "id": 43,
              "name": "免费2小时",
              "price": "39.80",
              "full_price": "39.80",
              "num": 1
            }
          ],
          "num": 1
        }
      ],
      // 控制模态框显示与隐藏
      modalVisible: false,
      qrCodeUrl: '',
      use_rule: "",
      title: "",
      currmoney: '0.00',
    };
  },
  onShow() {
    // this.noPay();
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

    this.getrechargeindexnew()
    this.currentIndex=parseInt(options.index)
    this.use_rule = options.use_rule
    this.title = options.title

    console.log('onLoad',this.currentIndex)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  methods: {
    // 充值活动列表
    getrechargeindexnew() {
      rechargeindexnew(success => {
        this.rechargelist = success.data.data
        this.setData({
          currmoney: this.rechargelist[this.currentIndex]['price'],
        });
        console.log('getrechargeindexnew',this.currentIndex)
      })
    },
    // 支付
    onpay() {
      userrechargenew({
        money: this.currmoney
      }, res => {
        if (res.data.code==0){
          uni.requestPayment({
            ...res.data.data,
            success(wxres) {
              console.log('requestPayment', wxres)
              uni.showModal({
                title: '支付成功',
                showCancel: false
              })
            },
            fail(e) {
              console.log('fail---requestPayment', e)
              uni.showModal({
                title: '取消支付',
                showCancel: false
              })
            }
          })
        }else {
          uni.showModal({
            title: res.data.msg,
            showCancel: false
          })
        }
        console.log('userrechargenew', res)
      })
    },
    // 输入金额
    inputmoney(e) {
      this.currmoney = e.detail.value
      console.log('inputmoney', e)
    },
    noPay() {
      this.setData({
        currentIndex: 0
      });
    },
    // 选择充值金额
    changecheck(index) {
      this.setData({
        currmoney: this.rechargelist[index]['price'],
        currentIndex: index
      });
    },


    er() {
      this.setData({
        currentIndex: 2
      });
    },

    san() {
      this.setData({
        currentIndex: 3
      });
    },

    si() {
      this.setData({
        currentIndex: 4
      });
    },

    wu() {
      this.setData({
        currentIndex: 9999
      });
    },
    // 取消支付
    closeModal: function () {
      uni.showToast({
        title: '取消支付',
        icon: 'none',
        duration: 2000,
        mask: true,
        // 设置为true，使背景半透明
        success: () => {
          setTimeout(() => {
            this.setData({
              modalVisible: false
            });
          }, 2000);
        }
      });
    },

    showModal: function () {
      this.onpay()
      // this.setData({
      //   modalVisible: true
      // });
    }
  }
};
</script>
<style>
.cz-ding {
  margin: 30rpx 30rpx 30rpx 30rpx;
}

.cz-ding-text {
  font-weight: bold; /* 设置字体加粗 */
  font-size: 18px; /* 将字体大小设为14px */
}

.cz_ding_for {
  margin: 30rpx 0rpx 30rpx 0rpx;
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
  flex-wrap: wrap; /* 允许子元素换行 */
}

.cz-ding-kk {
  margin-bottom: 20rpx;
  text-align: center;
  width: 210rpx;
  height: 210rpx;
  border: 1rpx solid rgb(206, 172, 59);
  border-radius: 10rpx; /* 设置边框圆角 */
}

.cz-ding_text1 {
  font-size: 19px; /* 将字体大小设为14px */
  margin-bottom: 20rpx;
  margin-top: 40rpx;
}

.cz-ding_text2 {
  margin-top: 30rpx;
  font-size: 12px; /* 将字体大小设为14px */
  color: rgb(185, 184, 184);
}

.cz-ding_text3 {
  margin-top: 10rpx;

  font-size: 13px; /* 将字体大小设为14px */
  color: rgb(185, 184, 184);
}

.cz-ding_text4 {
  font-size: 19px; /* 将字体大小设为14px */
  margin-bottom: 20rpx;
  margin-top: 70rpx;
}

.cz-xia {
  margin: 30rpx 30rpx 30rpx 30rpx;
  height: 80vh;
}

.cz-xiaaa {
  margin: 30rpx 30rpx 30rpx 30rpx;
}

.cz-xia-h1 {
  font-weight: bold; /* 设置字体加粗 */
  font-size: 18px; /* 将字体大小设为14px */
  margin-bottom: 30rpx;
}

.cz-xia-kj {
  margin-top: 30rpx;
  display: flex; /* 使用Flexbox布局 */
}

.cz-xia-kj2 {
  margin-top: 30rpx;
  border-radius: 4rpx; /* 设置边框圆角 */
  border: 1rpx solid rgba(197, 195, 186, 0.5);
}

.cz-xia-kj3 {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中 */
  height: 100rpx;
}

.cz-xia-text1 {
  width: 160rpx;
  color: rgb(165, 162, 151);
}

.cz-nei {
  height: 100rpx;
  border-bottom: 1rpx solid rgba(206, 203, 193, 0.5);
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-between;
  align-items: center; /* 垂直居中 */
  padding-left: 20rpx;
}

.cz-nei1 {
  height: 70rpx;
  border-right: 1rpx solid rgba(206, 203, 193, 0.5);
  padding: 30rpx 20rpx 0 20rpx;
}

.cz-nei2 {
  width: 300rpx;
}

.cz-di-k {
  width: 100%;
  height: 100rpx;
  margin: 30rpx 30rpx 30rpx 30rpx;
  background-color: rgb(221, 177, 140); /* 设置输入框背景色为灰色 */
  border-radius: 10rpx; /* 设置边框圆角 */
  display: flex; /* 使用Flexbox布局 */
  justify-content: center;
  align-items: center; /* 垂直居中 */
}

.pagex {
  position: relative;
  width: 100%;
  height: 100vh;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  z-index: 999; /* 确保遮罩层在最上层 */
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 0 70rpx 100rpx 70rpx;
  border-radius: 8rpx;
  z-index: 1000; /* 确保模态框在遮罩层上面 */
}

.modal-header {
  display: flex;
  justify-content: flex-end;
}

.close-btn {
  color: black;
  cursor: pointer;
  margin: 30rpx -40rpx 120rpx 0rpx;
  width: 20rpx;
  height: 20rpx;
}

.qr-code {
  display: block;
  margin-top: 20px;
  width: 400rpx;
  height: 400rpx;
}
</style>
